import React, {useEffect, useState} from 'react';
import { Row } from 'antd';
import services from '../../services/api';
import './index.less'
import SpreadBar from './component/spreadBar'
import Spread from './component/spread'
import CaseAnalyse from './component/caseAnalyse'
import SearchMent from './component/searchMent'
import RequestTrend from './component/requestTrend'
import { cloneDeep } from 'lodash';
import TabsMent from './component/tabsMent'
import RiskMent from './component/riskMent'
import { APIUrl } from '../../services/createServices';
export default function dashboard(props) {
  const [requestData, setRequestDta] = useState([]); // 请求情况
  const [actionType, setActionType] = useState('dashboardApi'); // 接口类型
  const [requestTrend, setRequestTrend] = useState([]); // 请求趋势
  const [requestDist, setRequestDist] = useState({}); // 请求类型分布
  const [hitTrend, setHitTrend] = useState({}); // 命中趋势
  const [caseAnalysis, setCaseAnanly] = useState({}); // 案件分析
  const [riskRank, setRiskRank] = useState({}); // 风险排行
  const [requestParam, setRequestParam] = useState({}); // 请求参数
  useState(() => {
    if (props.actionType) {
      setActionType(props.actionType);
    }
  },[])
  useEffect(()=>{
    if (props.seachParams && Object.keys(props.seachParams).length) { // 数据报告请求接口
       getAllData(props.seachParams);
    }
  },[props.seachParams]);
  function getAllDatas(data) {
    if (props.isDisable) {
      return
    };
    getAllData(data);
  };
  function getAllData(data) {
    // const {app_id,event_id,product_id, end, start} = data
    setRequestParam(cloneDeep(data));
    services[actionType].filter(data).then(res => {
      if (!res.code) {
        const { 
          requests, 
          request_trend, 
          request_distributed, 
          hit_trend_analysis,
          case_analysis,
          risk_ranking
        } = res.data
        setRequestDta(requests);
        setRequestTrend(request_trend);
        setRequestDist(request_distributed);
        setHitTrend(hit_trend_analysis);
        setCaseAnanly(case_analysis);
        setRiskRank(risk_ranking);
      }
    })
  }
  function downloadFile(data, area) {
    const datas =  window.btoa(JSON.stringify(data));
    const urls = `${APIUrl}/business-overview/result-download?param=${datas}&area=${area}`
    window.open(urls, '_black');
  }
  return (
    <>
     <div className='search-ment-dash'>
       <SearchMent {...props} searchFn={getAllDatas}></SearchMent> 
     </div>
     <Row className='dashbord-row'>
        <SpreadBar {...props} data={requestData} requestParam={requestParam}></SpreadBar>
     </Row>
     <Row className='dashbord-row'>
        <RequestTrend actionType={actionType} {...props} data={requestTrend} downFile={downloadFile} requestParam={requestParam}></RequestTrend>
     </Row>
      <Row className='dashbord-row'>
        <Spread actionType={actionType} {...props} data={requestDist} downFile={downloadFile} requestParam={requestParam}></Spread>
      </Row>
      <Row className='dashbord-row'>
        <TabsMent actionType={actionType} {...props} data={hitTrend} downFile={downloadFile} requestParam={requestParam}></TabsMent>
      </Row>
      <Row className='dashbord-row'>
        <CaseAnalyse {...props} data={caseAnalysis} downFile={downloadFile} requestParam={requestParam}></CaseAnalyse>
      </Row>
      <Row className='dashbord-row'>
        <RiskMent actionType={actionType} {...props} data={riskRank} downFile={downloadFile} requestParam={requestParam}></RiskMent>
      </Row>
    </>
  )
}